<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	class="csstransforms csstransforms3d csstransitions">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="author" content="chanlong" />
<meta name="keywords" content="蜜娃娃, 早教, 缤够, 云服务" />
<meta name="description" content="蜜娃娃云服务，专业提供早教领域，企业及机构，运营管理类，互联网产品" />
<link rel="stylesheet" href="/miwawa/resources/lib/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="/miwawa/resources/lib/bootstrap/extends/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="/miwawa/resources/fonts/font-awesome/4.5.0/css/font-awesome.css" />
<link rel="stylesheet" href="/miwawa/resources/lib/miwawa/1.0.2/css/miwawa-app.css" />
	

<style type="text/css">
/*透明背景*/
.mask{width: 100%; background-color: #000; position:fixed; z-index:1; opacity: 0.2; filter:alpha(opacity=50); top:0;left:0;height:100%;display:none;}
</style>
</head>

<body>
	<div class="container-fluid">
		<div class="row courses">
			<h4 id="info" class="col-sm-12" ></h4>
			<div class="col-sm-12">
				<ul class="course-list">
					<li id="courseList" class="list-item" th:each="course:${data.list}">
						<table class="table table-striped table-bordered table-condensed">
							<tr>
								<td>学生姓名</td>
								<td><span th:text="${course.name}">学生姓名</span></td>
							</tr>
							
							<tr>
								<td>所在班级</td>
								<td><span th:text="${course.classes}">所在班级</span></td>
							</tr>
							
							<tr>
								<td>合同类型</td>
								<td><span th:text="${course.item}">早教</span> <span>-</span>
									<span th:text="${course.type}">亲子课</span></td>
							</tr>
							<tr>
								<td>起止日期</td>
								<td>
									<span th:text="${#dates.format(course.fromDate, 'yyyy/MM/dd')}">2016年1月1日</span>
									<span>~</span>
									<span th:text="${#dates.format(course.overDate, 'yyyy/MM/dd')}">2016年12月1日</span>
								</td>
							</tr>
							<tr>
								<td>购买课时</td>
								<td>
									<span th:if="${course.item eq '早教'}" th:text="${course.totals + '节'}">96节</span>
									<span th:if="${course.item eq '托班'}" th:text="${course.totals + '月'}">96月</span>
								</td>
							</tr>
							<tr>
								<td>剩余课时</td>
								<td>
									<span th:if="${course.item eq '早教' and course.surplus eq null}" 	   th:text="${course.totals + '节'}">24节</span>
									<span th:if="${course.item eq '早教' and not(course.surplus eq null)}"  th:text="${#numbers.formatDecimal(course.surplus, 1, 0) + '节'}">24节</span>
									
									<span th:if="${course.item eq '托班' and course.surplus eq null}" 	   th:text="${course.totals + '个月'}">24个月</span>
									<span th:if="${course.item eq '托班' and not(course.surplus eq null)}"  th:text="${#numbers.formatDecimal(course.surplus, 1, 1) + '月'}">24节</span>
								</td>
							</tr>
							<tr>
								<td>到课情况</td>
								<td>
									<span>
										<button class="btn btn-primary btn-xm" th:id="${course.studentId}" th:value="${course.classesId}"  onclick="getCheckList(this)">查看详情</button>
									</span>
								</td>
							</tr>
							
							<tr>
								<td>课程签到</td>
								<td>
									<span>
										<button class="btn btn-primary btn-xm" onclick="showCheckBox(this)">课程签到</button>
									</span>
									<span>
										<input type="hidden" name="item"   th:value="${course.item}"      value="" />
										<input type="hidden" name="student"   th:value="${course.name}"      value="" />
										<input type="hidden" name="studentId" th:value="${course.studentId}" value="" />
										<input type="hidden" name="classes"   th:value="${course.classes}"   value="" />
										<input type="hidden" name="classesId" th:value="${course.classesId}" value="" />
										<input type="hidden" name="contractId" th:value="${course.contractId}" value="" />
										<input type="hidden" name="parentId" 		th:value="${course.parentid}" value="" />
										<input type="hidden" name="relation" th:value="${course.relation}" value="" />
									</span>
								</td>
							</tr>
							<tr>
								<td>课程请假</td>
								<td>
									<span>
										<button class="btn btn-primary btn-xm" onclick="showLeaveBox(this)">我要请假</button>
									</span>
									<span>
										<input type="hidden" name="item"   	  th:value="${course.item}"    value="" />
										<input type="hidden" name="parent"    th:value="${course.parent}"    value="" />
										<input type="hidden" name="parentId"  th:value="${course.parentid}"  value="" />
										<input type="hidden" name="student"   th:value="${course.name}"      value="" />
										<input type="hidden" name="studentId" th:value="${course.studentId}" value="" />
										<input type="hidden" name="classes"   th:value="${course.classes}"   value="" />
										<input type="hidden" name="classesId" th:value="${course.classesId}" value="" />
										<input type="hidden" name="relation" th:value="${course.relation}" value="" />
									</span>
								</td>
							</tr>
						</table>
					</li>
				</ul>
			</div>
		</div>
	</div>
	
	
	<div class="modal-content" style="display:none;position:fixed;top:30px;left:0;z-index: -20;">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="关闭" onclick="closeLeaveBox()">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="leave-modal-label">请假信息</h4>
				</div>
				<div class="modal-body editor-body-sm">
					<form class="form-horizontal form-editor form-editor-leave bv-form"
						novalidate="novalidate">
						<button type="submit" class="bv-hidden-submit" disabled="disabled"
							style="display: none; width: 0px; height: 0px;"></button>
						<div class="row">
							<div class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label" for="leaveDate">请假时间</label>
									<div class="col-sm-8">
										<div class='input-group date' id='datetimepicker2'>
						                    <input type='button' style="text-align:start" name="leaveDate" id="leaveDate" class="form-control" />
						                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
						                    </span>
		               				 	</div>
									</div>
									
								</div>
							</div>
							<div id="lengthDiv" class="col-sm-4">
								<div class="form-group">
									<label class="col-sm-4 control-label" for="length">请假天数</label>
									<div class="col-sm-8">
										<div class="input-group">
											<input type="text" name="length" id="length"
												class="form-control" /> <span class="input-group-addon">天</span>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-8">
								<div class="form-group">
									<label class="col-sm-2 control-label" for="reason">请假原因</label>
									<div class="col-sm-10">
										<textarea name="reason" id="reason" class="form-control"></textarea>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" onclick="closeLeaveBox()">关闭</button>
					<button type="button" class="btn btn-primary" onclick="leaveCourse()">确认</button>
				</div>
				<input name="item"  	 type="hidden" value="" />
				<input type="hidden" name="parent"    value="" />
				<input type="hidden" name="parentId"  value="" />
				<input type="hidden" name="student"   value="" />
				<input type="hidden" name="studentId" value="" />
				<input type="hidden" name="classes"   value="" />
				<input type="hidden" name="classesId" value="" />
				<input type="hidden" name="relation" value="" />
				
		</div>
		
		
	<div class="modal-dialog"  style="display:none;position:fixed;top:30px;left:0;z-index: -20;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="关闭" onclick="closeCheckBox()">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title" id="check-modal-label">签到信息</h4>
			</div>
			<div class="modal-body editor-body-sm">
				<div class='col-sm-6'>
		            <div class="form-group">
		            	<label class="col-sm-4 control-label" for="checkDate">签到时间</label>
		                <div class='input-group date' id='datetimepicker1'>
		                    <input type="button" name="checkDate" id="checkDate" class="form-control" style="text-align:start" />
		                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
		                    </span>
		                </div>
		            </div>
		        </div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeCheckBox()">关闭</button>
				<button type="button" class="btn btn-primary" onclick="checkCourse()" data-not-hide="true">确认</button>
			</div>
		</div>
		
		<input name="checkTime"  type="hidden" value="" />
		<input name="student"    type="hidden" value="" />
		<input name="studentId"  type="hidden" value="" /> 
		<input name="classes"    type="hidden" value="" />
		<input name="classesId"  type="hidden" value="" />
		<input name="item"  	 type="hidden" value="" />
		<input name="contractId" type="hidden" value="" />
		<input name="parentId" 	 type="hidden" value="" />
		<input name="relation"	 type="hidden" value="" />
	</div>
	
	<div class="mask"></div>
	
	<input id="dbname" name="dbname"  th:value="${data.dbname}"    type="hidden" value="" />
		
	

	<!-- Javascript =============================================== -->
	<script src="/miwawa/resources/lib/miwawa/1.0.2/js/jquery/jquery-1.11.3.min.js"></script>
	<script src="/miwawa/resources/lib/jqueryui/1.11.0/js/jquery-ui.min.js"></script>
	<script src="/miwawa/resources/lib/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script src="/miwawa/resources/lib/bootstrap/extends/bootstrap-daterangepicker/2.1.17/js/moment.js"></script>
	<script src="/miwawa/resources/lib/bootstrap/extends/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
	<script src="/miwawa/resources/lib/bootstrap/extends/bootstrap-calendar/0.2.4/js/language/zh-CN.js"></script>
	
	
<script th:inline="javascript">
	/*<![CDATA[*/
	
	$(function(){
		if($("#courseList").children("table").length == 0){
			$("#info").text("未查询到课程，请使用购买合同时的家长手机号登录APP，并确保已绑定了宝宝所在的机构！");
		}
	});
	
	// 获取 签到记录
	function getCheckList(obj) {
		var studentId = $(obj).attr("id");
		var classesId = $(obj).val();
		var dbname = $("#dbname").val();
		
		var param = [];
		param.push(dbname);
		param.push(studentId);
		param.push(classesId);
		window.open("/miwawa/app/getCheckList?params="+param.join(","));
	}
	
	// 获取 请假记录
	function getLeaveList(obj) {
		var studentId = $(obj).parent().siblings().children("input[name='studentId']").val();
		var classesId = $(obj).parent().siblings().children("input[name='classesId']").val();
		var dbname = $("#dbname").val();
		
		var param = [];
		param.push(dbname);
		param.push(studentId);
		param.push(classesId);
		window.open("/miwawa/app/getLeaveList?params="+param.join(","));
	}
	
	
	function showCheckBox(obj){
		$(".mask").css("display", "block");
		$(".modal-dialog").show();
		$(".modal-dialog").css("display", "block");
		$(".modal-dialog").css("z-index", "20");
		
		// 通过obj取值 
		var item	  = $(obj).parent().siblings().children("input[name='item']").val();
		var student   = $(obj).parent().siblings().children("input[name='student']").val();
		var studentId = $(obj).parent().siblings().children("input[name='studentId']").val();
		var classes   = $(obj).parent().siblings().children("input[name='classes']").val();
		var classesId = $(obj).parent().siblings().children("input[name='classesId']").val();
		var contractId = $(obj).parent().siblings().children("input[name='contractId']").val();
		var parentId = $(obj).parent().siblings().children("input[name='parentId']").val();
		var relation = $(obj).parent().siblings().children("input[name='relation']").val();
		
		// 赋值传递 
		$(".modal-dialog").children("input[name='item']").val(item);
		$(".modal-dialog").children("input[name='student']").val(student);
		$(".modal-dialog").children("input[name='studentId']").val(studentId);
		$(".modal-dialog").children("input[name='classes']").val(classes);
		$(".modal-dialog").children("input[name='classesId']").val(classesId);
		$(".modal-dialog").children("input[name='contractId']").val(contractId);
		$(".modal-dialog").children("input[name='parentId']").val(parentId);
		$(".modal-dialog").children("input[name='relation']").val(relation);
		
		
		var dbname = $("#dbname").val();
		
		// 获取早教班上课时间 （能签到的日期）
		var classTime = "";
		
		$.ajax({
			url : "/miwawa/"+dbname+"/app/search.json",
			type : "POST",
			dataType : "json",
			data : {
				"entityClass" : "com.app.miwawa.api.eam.entity.ClassesTime",
				"and": [
					{
						"operator": "EQ",
						"fieldName": "classesId",
						"fieldValue": classesId
					},
					{
						"operator": "EQ",
						"fieldName": "type",
						"fieldValue": "早教"
					}
				]
			},
			async : false,
			success : function(data) {
				if(data.success == true ){
					if(data.data.rows.length > 0){
						classTime = data.data.rows[0].week;
					}
				}
			}
		});
		
		// 一周中不能签到的日子
		var daysOfWeekDisabled = [];
		
		switch (classTime) {
			case "周日":
				daysOfWeekDisabled = [1,2,3,4,5,6];
			  break;
			case "周一":
				daysOfWeekDisabled = [0,2,3,4,5,6];
			  break;
			case "周二":
				daysOfWeekDisabled = [0,1,3,4,5,6];
			  break;
			case "周三":
				daysOfWeekDisabled = [0,1,2,4,5,6];
			  break;
			case "周四":
				daysOfWeekDisabled = [0,1,2,3,5,6];
			  break;
			case "周五":
				daysOfWeekDisabled = [0,1,2,3,4,6];
			  break;
			case "周六":
				daysOfWeekDisabled = [0,1,2,3,4,5];
			  break;
		}
		
		$('#datetimepicker1').datetimepicker({
			format: 'YYYY-MM-DD',
			daysOfWeekDisabled : daysOfWeekDisabled
		});
		
	}
	
	
	function closeCheckBox(){
		$(".mask").css("display", "none");
		$(".modal-dialog").hide();
		$(".modal-dialog").css("display", "none");
		$(".modal-dialog").css("z-index", "-20");
		
		// 清空缓存数据 
		$(".modal-dialog").children("input[name='hidden']").val("");
		
	}
	
	
	function getCheckTime(){
		var date = new Date();

		var hour = date.getHours(); 
		var minutes = date.getMinutes(); 
		
		return hour + ":" + minutes;

	}
	
	// 课程签到
	function checkCourse() {
		var checkDate = $("#checkDate").val();
		var checkTime = getCheckTime();
		
		// 赋值传递 
		var item      = $(".modal-dialog").children("input[name='item']").val();
		var student   = $(".modal-dialog").children("input[name='student']").val();
		var studentId = $(".modal-dialog").children("input[name='studentId']").val();
		var classes   = $(".modal-dialog").children("input[name='classes']").val();
		var classesId = $(".modal-dialog").children("input[name='classesId']").val();
		var contractId = $(".modal-dialog").children("input[name='contractId']").val();
		var parentId = $(".modal-dialog").children("input[name='parentId']").val();
		var relation = $(".modal-dialog").children("input[name='relation']").val();
		
		var dbname = $("#dbname").val();
		
		var flag = false;
		
		$.ajax({
			url : "/miwawa/app/isCheckedToday",
			type : "POST",
			dataType : "json",
			data : {
				"dbname"   : dbname,
				"item"     : item,
				"checkDate": checkDate,
				"studentId": studentId,
				"classesId": classesId
			},
			async : false,
			error : function(data) {
			},
			success : function(data) {
				if(data.checked == true){
					flag = true;
					alert("当天课程已签到过，不用再签！");
				}
				if(data.leaved == true){
					flag = true;
					alert("当天课程已请假，不能签到！");
				}
			}
		});
		
		
		if(flag == true){
			return;
		}
			
		
// 		var itemCode = "";
// 		if(item == "早教"){
// 			itemCode = "ZJ";
// 		} else if(item == "托班"){
// 			itemCode = "TB";
// 		}
	
		$.ajax({
// 			url : "/miwawa/"+dbname+"/app/"+itemCode+"/addCheckRecord",
			url : "/miwawa/"+dbname+"/app/addCheckRecord",
			type : "POST",
			dataType : "json",
			data : {
				"checkDate": checkDate,
				"checkTime": checkTime,
				"student": student,
				"studentId": studentId,
				"classes": classes,
				"classesId": classesId,
				"contractId": contractId,
				"item": item,
				"actor": "家长:"+relation,
				"actorId": parentId,
				"status":"0",
				"invalid":"F"
			},
			async : false,
			success : function(data) {
				if(data.success){
					alert("签到成功！");
					closeCheckBox();
					// 刷新页面 
					window.location.href=window.location.href;
				}
				console.info(data);
			}
		});
	}
	
	
	function showLeaveBox(obj){
		$(".mask").css("display", "block");
		$(".modal-content").show();
		$(".modal-content").css("display", "block");
		$(".modal-content").css("z-index", "20");
		
		// 通过obj取值 
		var parent    = $(obj).parent().siblings().children("input[name='parent']").val();
		var parentId  = $(obj).parent().siblings().children("input[name='parentId']").val();
		var student   = $(obj).parent().siblings().children("input[name='student']").val();
		var studentId = $(obj).parent().siblings().children("input[name='studentId']").val();
		var classes   = $(obj).parent().siblings().children("input[name='classes']").val();
		var classesId = $(obj).parent().siblings().children("input[name='classesId']").val();
		var item	  = $(obj).parent().siblings().children("input[name='item']").val();
		var relation  = $(obj).parent().siblings().children("input[name='relation']").val();
		
		// 赋值传递 
		$(".modal-content").children("input[name='item']").val(item);
		$(".modal-content").children("input[name='parent']").val(parent);
		$(".modal-content").children("input[name='parentId']").val(parentId);
		$(".modal-content").children("input[name='student']").val(student);
		$(".modal-content").children("input[name='studentId']").val(studentId);
		$(".modal-content").children("input[name='classes']").val(classes);
		$(".modal-content").children("input[name='classesId']").val(classesId);
		$(".modal-content").children("input[name='relation']").val(relation);
		
		// dbanme
		var dbname = $("#dbname").val();
		
		if(item == "早教"){
			$("#lengthDiv").css("display", "none");
			$("#length").val("1");
		}
		
		if(item == "托班"){
			$("#lengthDiv").css("display", "block");
		}
		
		// 获取早教班上课时间 （能签到的日期）
		var classTime = "";
		
		$.ajax({
			url : "/miwawa/"+dbname+"/app/search.json",
			type : "POST",
			dataType : "json",
			data : {
				"entityClass" : "com.app.miwawa.api.eam.entity.ClassesTime",
				"and": [
					{
						"operator": "EQ",
						"fieldName": "classesId",
						"fieldValue": classesId
					},
					{
						"operator": "EQ",
						"fieldName": "type",
						"fieldValue": "早教"
					}
				]
			},
			async : false,
			success : function(data) {
				if(data.success == true ){
					if(data.data.rows.length > 0){
						classTime = data.data.rows[0].week;
					}
				}
			}
		});
		
		// 一周中不能请假的日子
		var daysOfWeekDisabled = [];
		
		switch (classTime) {
			case "周日":
				daysOfWeekDisabled = [1,2,3,4,5,6];
			  break;
			case "周一":
				daysOfWeekDisabled = [0,2,3,4,5,6];
			  break;
			case "周二":
				daysOfWeekDisabled = [0,1,3,4,5,6];
			  break;
			case "周三":
				daysOfWeekDisabled = [0,1,2,4,5,6];
			  break;
			case "周四":
				daysOfWeekDisabled = [0,1,2,3,5,6];
			  break;
			case "周五":
				daysOfWeekDisabled = [0,1,2,3,4,6];
			  break;
			case "周六":
				daysOfWeekDisabled = [0,1,2,3,4,5];
			  break;
		}
		
		$('#datetimepicker2').datetimepicker({
			format: 'YYYY-MM-DD',
			daysOfWeekDisabled : daysOfWeekDisabled
		});
		
		
		// 获取托班请假的日子
		$.ajax({
			url : "/miwawa/app/getLeaveDays",
			type : "POST",
			dataType : "json",
			data : {
				"dbname"   : dbname,
				"item"     : item,
				"parentId": parentId,
				"studentId": studentId,
				"classesId": classesId
			},
			async : false,
			error : function(data) {
			},
			success : function(data) {
				if(data.success){
					for(var i = 0; i < data.leaveDays.length; i++){
						console.info(data.leaveDays[i].leaveDate);
						console.info(data.leaveDays[i].length);
					}
				}
			}
		});
		
	}
	
	function closeLeaveBox(){
		$(".mask").css("display", "none");
		$(".modal-content").hide();
		$(".modal-content").css("display", "none");
		$(".modal-content").css("z-index", "-20");
		
		// 清空缓存数据 
		$(".modal-content").children("input[type='hidden']").val("");
		$("#length").val("");
		$("#reason").val("");
		
		
	}
	
	// 课程请假 确认提交
	function leaveCourse() {
		
		var leaveDate = $("#leaveDate").val();
		
		var item    = $(".modal-content").children("input[name='item']").val();
		var parent    = $(".modal-content").children("input[name='parent']").val();
		var parentId  = $(".modal-content").children("input[name='parentId']").val();
		var student   = $(".modal-content").children("input[name='student']").val();
		var studentId = $(".modal-content").children("input[name='studentId']").val();
		var classes   = $(".modal-content").children("input[name='classes']").val();
		var classesId = $(".modal-content").children("input[name='classesId']").val();
		var relation = $(".modal-content").children("input[name='relation']").val();
		
		var dbname = $("#dbname").val();
		
		if($("#length").val().length == 0){
			alert("请填写请假天数！");
			return;
		}
		
		if($("#reason").val().length == 0){
			alert("请填写请假原因！");
			return;
		}
		
		// 
		var flag = false;
		$.ajax({
			url : "/miwawa/app/isCheckedToday",
			type : "POST",
			dataType : "json",
			data : {
				"dbname"   : dbname,
				"item"     : item,
				"checkDate": leaveDate,
				"studentId": studentId,
				"classesId": classesId
			},
			async : false,
			error : function(data) {
			},
			success : function(data) {
				if(data.checked == true){
					flag = true;
					alert("当天课程已签到过，不能请假！");
				}
				if(data.leaved == true){
					flag = true;
					alert("当天课程已请过假了，请查看详情页面！");
				}
			}
		});
		
		
		if(flag == true){
			return;
		}
		
		// 提交请假信息 
		$.ajax({
			url : "/miwawa/" + dbname + "/app/save",
			type : "POST",
			dataType : "json",
			data : {
				"entityClass": "com.app.miwawa.api.eam.entity.StudentLeave",
				"bean": {
					"length": $("#length").val(),
					"reason": $("#reason").val(),
					"leaveDate": leaveDate,
					"parent": parent,
					"parentId": parentId,
					"student": student,
					"studentId": studentId,
					"classes": classes,
					"classesId": classesId,
					"actor": "家长:"+relation,
					"actorId": parentId,
					"status": "0",
					"invalid": "F"
				}
			},
			async : false,
			success : function(data) {
				if(data.success){
					alert("请假成功！");
					closeLeaveBox();
				}
				console.info(data);
			}
		});
	}
	/*]]>*/
	</script>
</body>
</html>
